<template>
	<div class="cate-tab1 swiper">
		<ol class="swiper-wrapper">
			<!-- 计算属性的返回结果【重组的数组】，丢给循环操作 -->
			<li v-for="(list,index) in pages" :key="index.id" class="swiper-slide">
				<router-link to="/" v-for="item in list" :key="item.id">
					<img :src="item.imgURL" >
					<aside>
						<h3>{{item.title}}</h3>
						<h4>{{item.msg}}</h4>
						<p>
							￥<strong>{{item.price}}</strong>起<em>{{item.oldprice}}</em>
						</p>
					</aside>
				</router-link>
			</li>
		</ol>
		<div class="xbox">
			<p>加载更多<i class="iconfont">&#xe619;</i>
			</p>
			
		</div>
	</div>
</template>

<script>
	// 引入vue周期函数
	import{onMounted} from 'vue';
	// 2.引入Swiper的动态组件
	import Swiper,{
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination,
	}from 'swiper'
	// 3.swiper组件应用配置
	Swiper.use([Autoplay,EffectCoverflow,EffectCube,Pagination])
	
	export default{
		name:'CategoryTab1',
		// props:['propscategoryTab1'],
		data(){
			return{
				tab1List : [],
			}
		},
		created() {
			//备份[避免堵塞]
			let that = this;
			//向dataHome.json文件发起异步请求
			this.axios.get('/api/dataHome.json').then( (res)=> {
				let data = res.data.Homemsg[0];
				that.tab1List=data.tab1List
			}).catch( (error)=> {
				console.log(error);
			});
		},
		computed:{
			//程序将其当成是属性而不是函数，是个变量【循环/判断】
			pages(){
				let arr=[];   //空数组,目的是:重组一个二维数组
				let num = 4;  //每页条数
				//将原数组遍历
				this.tab1List.forEach( ( item , index)=>{
					// //i：每页的页码
					let i = Math.floor( index / num);
					// //将计算的页码放入新数组内；作为下标
					// //判断该下标是否已存在
					// if(!arr[i]){
					// 	// 第一次出现
					// 	arr[i]=[]
					// 	arr[i].push( item );
					// }else{
					// 	//已经出现过直接添加
					// 	arr[i].push( item );
					// }
					// 简写:
					if( !arr[i] ) arr[i] = [];
					arr[i].push( item );				
				} )
				return arr;
			}
		},
		methods:{
			//函数，不会涉及到循环和判断，函数不能允许的操作
			name(){
				
			}
		},

			updated(){ 
				new Swiper( '.cate-tab1' , {
					
				} )
			} 
		
	}
</script>

<style scoped>
	a{
		text-decoration: none;
		color: black;
	}
	.cate-tab1{
		height: 9.5rem;
	}
	.cate-tab1 ol{
		width: 100%;
		height: 8rem;

	}
	.cate-tab1 ol li{
		float: left;
		width: 100%;
		height: 100%;
	}
	.cate-tab1 ol li a{
		float: left;
		width: 47%;
		height:4rem;
		margin-left: 0.15rem;
		background-size: 100% 100%;
		text-align: center;
		
	}
	.cate-tab1 ol li a:nth-child(even){
		float: right;
		margin-right: 0.15rem;
	}
	
	.cate-tab1 ol li a img{
		width: 90%;
		height: 2.3rem;
		margin-top: 0.2rem;
		border-radius: 0.3rem;
		background-color: 100%;
	}
	.cate-tab1 ol li aside h3{
		font-size: 0.35rem;
		line-height: 0.5rem;
		text-align: left;
		margin-left: 0.15rem;

	}
	.cate-tab1 ol li aside h4{
		width: 100%;
		height: 0.35rem;
		color: #989898;
		text-align: left;
		margin-left: 0.15rem;
		/* 一行文字省略号: 省略号+溢出隐藏+禁止换行 [超出宽度溢出隐藏且同省略号代替] */
		overflow: hidden;
		text-overflow: ellipsis;  /* 省略号 */
		white-space: nowrap; /* 禁止换行 */
	}
	.cate-tab1 ol li  aside p{
		font-size: 0.4rem;
		line-height: 0.6rem;
		color: #ff7100;
		font-weight: bold;
		text-align: left;
		margin-left: 0.15rem;
	}
	.cate-tab1 ol li aside p em{
		color: #cdcdcd;
		font-size: 0.15rem;
		text-decoration: line-through;
		padding-left: 0.2rem;
	}
	.cate-tab1 .xbox{
		width: 99%;
		height: 1rem;
		font-size: 0.38rem;
		margin-top: 0.3rem;
		border: 1px solid #e1e1e1;
		border-radius: 0.3rem;
		text-align: center;
		line-height: 1rem;
	}
</style>
